<!--
 * @Description: 退回日志
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-07-27 13:37:49
 * @LastEditTime: 2022-07-29 14:42:47
 * @FilePath: \cscec-pms-admin\src\views\project\constructionLog\components\ReturnedLog.vue
-->
<template>
  <a-modal
    title="退回日志"
    class="large-modal"
    centered
    :visible="visible"
    :confirm-loading="loading"
    :ok-text="'确定退回'"
    @ok="handleOk"
    @cancel="visible = false"
  >
    <p>请选择要退回的日志</p>
    <b-table
      ref="table"
      :select-config="{ use: true, type: 'checkbox', rowKey:'id' }"
      :scroll="{ y: 350 }"
      :columns="columns"
      :request="loadData"
      :show-page="false"
      @select-click="(e) => (selectedRow = e.rows)"
    >
      <template
        slot="operation"
        slot-scope="text, record"
      >
        <a @click="handleDetail(record)">查看</a>
      </template>
    </b-table>
    <DialogDetail
      ref="dialogDetail"
      :query-params="params"
    />
  </a-modal>
</template>
<script>
import { backList, drawBack } from '@/api/subcontractors/standing'
import DialogDetail from './DialogDetail'
export default {
  name: 'ReturnedLog',
  props: {
    // 施工日志id
    id: {
      type: String,
      default: ''
    },
    // 表头
    columns: {
      type: Array,
      default: () => {
        return [
          {
            title: '序号',
            width: '80px',
            customRender(text, record, index) {
              return index + 1
            }
          },
          {
            title: '部门',
            dataIndex: 'deptName'
          },
          {
            title: '岗位',
            dataIndex: 'postName'
          },
          {
            title: '姓名',
            dataIndex: 'userName'
          },
          {
            title: '状态',
            dataIndex: 'fillStatus'
          },
          {
            title: '填写时间',
            dataIndex: 'fillTime'
          },
          {
            title: '操作',
            dataIndex: 'operation',
            width: '180px',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      }
    }
  },
  components: { DialogDetail },
  data() {
    return {
      // 首次加载
      first: true,
      // 加载中
      loading: false,
      // 显示隐藏
      visible: false,
      // 表格加载方法
      loadData: async () => {
        this.first = false
        const res = await backList({ id: this.id })
        if (res.code === this.SUCCESS_CODE) {
          return { ...res, data: res.data }
        }
        return { data: [], code: 200 }
      },
      // 选中行
      selectedRow: [],
      // 查看参数
      params: {}
    }
  },
  watch: {
    visible(val) {
      if (val && !this.first) {
        this.loadData()
      }
    }
  },
  methods: {
    /**
     * @description: 确定退回
     * @return {void}
     */
    handleOk() {
      if (this.selectedRow.length > 0) {
        const vm = this
        this.$confirm({
          content: '请确认是否要退回选择的日志？',
          onOk: () => {
            return new Promise((resolve, reject) => {
              drawBack({
                detailsIdList: this.selectedRow.map((el) => el.id),
                id: this.id
              }).then(({ code }) => {
                if (code === 200) {
                  vm.$message.success('退回成功')
                  this.visible = false
                  this.$multiTab.close()
                  resolve()
                } else {
                  vm.$message.warning('退回失败')
                  reject()
                }
              })
            })
          }
        })
      } else {
        this.$confirm({
          content: '请至少选择一条要退回的日志'
        })
      }
    },
    /**
     * @description: 查看
     * @param {object} record 行数据
     * @return {void}
     */
    handleDetail(record) {
      this.params = { id: this.id, userId: record.userId }
      this.$refs.dialogDetail.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
</style>
